
<template>
  <div class="inline-block">
    <el-button
      :size="size"
      :type="type"
      @click="drawer=true"
    >
      {{ text }}
    </el-button>
    <el-drawer
      :title="title"
      :visible.sync="drawer"
      :wrapper-closable="false"
      :before-close="onBeforeClose"
      append-to-body
      destroy-on-close
      class="adjust-drawer"
    >
      <el-scrollbar
        style="height:100%"
        wrap-style="overflow-x:hidden;"
      >
        <freight-form
          :primary-key="primaryKey"
          label-position="top"
          size="small"
          submit-button-text="保存并使用该模板"
          @saved="onUseSaved"
        />
      </el-scrollbar>
    </el-drawer>
  </div>
</template>

<script>
import FreightForm from '@/components/FreightTemplate/FreightForm'
export default {
  name: 'CreateFreightTemplate',
  components: {
    FreightForm
  },
  props: {
    text: {
      type: String,
      default: '添加运费模板'
    },
    title: {
      type: String,
      default: '添加运费模板'
    },
    size: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'primary'
    },
    primaryKey: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      drawer: false
    }
  },
  methods: {
    onUseSaved(data) {
      this.$emit('select', data)
      this.drawer = false
    },
    onBeforeClose(done) {
      this.$confirm('当前编辑模板未保存, 是否继续关闭?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          done()
        })
        .catch(() => {
          return false
        })
    }
  }
}
</script>
